<template>
    <view class="scan-outbound">
        <sc-navbar title="扫码出库"></sc-navbar>
        <view class="head">
            <glo-search placeholder="请输入条码/名称/编号等关键字搜索"></glo-search>
            <sc-view mt="20">
                <glo-tabs :list="tabsList" :active-style="{ fontSize: '28rpx' }" :internal-style="{ fontSize: '23rpx' }"
                    gap="40"></glo-tabs>
            </sc-view>
        </view>
        <glo-gutter>
            <glo-chunk>
                <sc-flex ai="center" jc="between">
                    <glo-title title="hxs测试工具组09230103 "></glo-title>
                    <sc-icon name="arrow-right" size="20" color="primary"></sc-icon>
                </sc-flex>
                <sc-text text="工具组条码: 2006600000013008000020" size="19" color="#767676"></sc-text>
                <sc-grid ai="center" col-gap="33" col="90rpx 1fr" mt="19">
                    <sc-image src="/static/empty.png" width="90" height="90"></sc-image>
                    <glo-info :info="getToolGroupInfo({})"></glo-info>
                </sc-grid>
            </glo-chunk>
        </glo-gutter>
        <image src="/static/imgs/ic_saoma_2.png" mode="" class="saoma-sidebar"></image>
        <sc-footer height="240">
            <sc-view padding="0 75rpx" width="100%" height="100%">
                <sc-flex ai="center" col-gap="25" jc="end">
                    <sc-text text="商品总数" size="18" color="#3D3D3D"></sc-text>
                    <sc-text text="55" size="60" line-height="86" color="primary" bold></sc-text>
                    <sc-text text="工具总数" size="18" color="#3D3D3D"></sc-text>
                    <sc-text text="55" size="60" line-height="86" color="primary" bold></sc-text>
                </sc-flex>
                <sc-flex ai="center" col-gap="8" jc="end">
                    <sc-text text="展开详情" size="19" color="primary"></sc-text>
                    <sc-icon name="arrow-down" size="20" color="primary"></sc-icon>
                </sc-flex>
                <sc-flex ai="center" col-gap="45" mt="20">
                    <sc-button type="grey-blue" text="添加商品" width="265" height="75"
                        @click="$sc.push('/subOrder/pages/addCommodity')"></sc-button>
                    <sc-button type="primary" text="提交" width="265" height="75"></sc-button>
                </sc-flex>
            </sc-view>
        </sc-footer>
    </view>
</template>


<script setup>

const tabsList = ref([
    {
        id: 0,
        name: "工具组",
        type: "sysp",
        statistics: {
            total: 10,
            available: 5,
        },
    },
    {
        id: 1,
        name: "钉盒骨板组",
        type: "bhsp",
        statistics: {
            total: 10,
            available: 5,
        },
    },
    {
        id: 2,
        name: "套包",
        type: "bhsp",
        statistics: {
            total: 10,
            available: 5,
        },
    },
    {
        id: 3,
        name: "零散商品",
        type: "bhsp",
        statistics: {
            total: 10,
            available: 5,
        },
    },
    {
        id: 4,
        name: "零散工具",
        type: "bhsp",
        statistics: {
            total: 10,
            available: 5,
        },
    },
]);

const getToolGroupInfo = (val) => [
    {
        type: "single",
        label: "工具组编码",
        value: val.toolGroupCode
    },
    {
        type: "single",
        label: "生产厂家",
        value: val.toolGroupCode
    },
    {
        type: "single",
        label: "所含工具类别",
        value: val.toolGroupCode
    },
]

</script>
<style lang="scss">
page {
    background-color: #F7F7F7;
}
</style>

<style lang="scss" scoped>
.scan-outbound {
    .head {
        padding: 19rpx 35rpx 0;
        background-color: #fff;
    }
}

.saoma-sidebar {
    position: fixed;
    right: 0;
    bottom: 350rpx;
    width: 150rpx;
    height: 150rpx;
}
</style>
